<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算日期</title>
    <script>
        //日期加上天数得到新的日期
        //dateTemp 需要参加计算的日期，days要添加的天数，返回新的日期，日期格式：YYYY-MM-DD
        function getNewDay(beginDate, days) {
            var beginDates = beginDate.split("-");
            var nDate = new Date(beginDates[1] + '-' + beginDates[2] + '-' + beginDates[0]); //转换为MM-DD-YYYY格式
            var millSeconds = Math.abs(nDate) + (days * 24 * 60 * 60 * 1000);
            var rDate = new Date(millSeconds);
            var year = rDate.getFullYear();
            var month = rDate.getMonth() + 1;
            if (month < 10) month = "0" + month;
            var date = rDate.getDate();
            if (date < 10) date = "0" + date;
            return (year + "-" + month + "-" + date);
        }
        function getResult() {
            var beginDate=document.getElementById("beginDate").value;
            var days=document.getElementById("days").value;
            document.getElementById("result").innerHTML=getNewDay(beginDate,days);
        }

    </script>
    <style>
        body{
            background: url("./img/background4.gif");
        }
       .main-container{
            margin:200px auto;
            width:1000px;
           height:500px;
           font:250% 微软雅黑;
        }
        #beginDate{
            height:55px;
            width:500px;
            font-size:50px;
            margin-top:10px;
        }
       #days{
           height:55px;
           width:500px;
           font-size:50px;
           margin-top:10px;
       }
        #calculate{
            height:55px;
            width:505px;
            font-size:30px;
            margin-top:10px;
        }
    </style>
</head>
<body>
   <div class="main-container">
       请输入开始日期(2017-11-11这种格式的日期)：
       <br>
       <input type="text" id="beginDate" placeholder="2017-05-20"/>
       <br>
       请输入天数：
       <br>
       <input type="number" id="days">
       <br>
       <button onclick="getResult()" id="calculate">计    算</button>
       <hr>
       结果日期：<span id="result"></span>
   </div>
</body>
</html>